<template>
	<view>
		<form @submit="formSubmit" @reset="formReset">
			<scroll-view scroll-y :style="{height:height+'px'}">
				<view class="formlist inputtext ">
					<view class="formgroup border-bottom-E3E3E5">
						<view class="labletitle"><label>关</label></view>
						<view class="controlvalue">
							<switch name="shutswitch" style="transform: scale(0.7)" />
						</view>
					</view>
				</view>
				<view class="formlist inputtext ">
					<view class="formgroup border-bottom-E3E3E5">
						<view class="labletitle"><label>开</label></view>
						<view class="controlvalue">
							<switch name="openswitch" checked style="transform: scale(0.7)" />
						</view>
					</view>
				</view>
				<view class="formlist inputtext">
					<view class="formgroup border-bottom-E3E3E5">
						<view class="labletitle"><label>当前账户</label></view>
						<view class="controlvalue">
							<input type="text" v-model="formexample.currentAccount" name="currentAccount" disabled="true" />
						</view>
					</view>
				</view>
				<view class="formlist inputtext">
					<view class="formgroup border-bottom-E3E3E5">
						<view class="labletitle"><label>当前姓名</label></view>
						<view class="controlvalue">
							<input type="text" v-model="formexample.currentName" name="currentName" disabled="true" />
						</view>
					</view>
				</view>
				<view class="formlist inputtext">
					<view class="formgroup border-bottom-E3E3E5">
						<view class="labletitle"><label>当前岗位</label></view>
						<view class="controlvalue">
							<input type="text" v-model="formexample.currentPosition" name="currentPosition" disabled="true" />
						</view>
					</view>
				</view>
				<view class="formlist inputtext">
					<view class="formgroup border-bottom-E3E3E5">
						<view class="labletitle"><label>当前部门</label></view>
						<view class="controlvalue">
							<input type="text" v-model="formexample.currentDepartment" name="currentDepartment" disabled="true" />
						</view>
					</view>
				</view>
				<view class="formlist inputtext">
					<view class="formgroup border-bottom-E3E3E5">
						<view class="labletitle"><label>日期和时间</label></view>
						<view class="controlvalue">
							<input type="text" v-model="formexample.dateTime" name="dateTime" disabled="true" />
						</view>
					</view>
				</view>
				<view class="formlist inputtext">
					<view class="formgroup border-bottom-E3E3E5">
						<view class="labletitle"><label>日期</label></view>
						<view class="controlvalue">
							<input type="text" v-model="formexample.date" name="date" disabled="true" />
						</view>
					</view>
				</view>
				<view class="formlist inputtext">
					<view class="formgroup border-bottom-E3E3E5">
						<view class="labletitle"><label>时间</label></view>
						<view class="controlvalue">
							<input type="text" v-model="formexample.time" name="time" disabled="true" />
						</view>
					</view>
				</view>
				<view class="formlist inputtext">
					<view class="formgroup">
						<view class="labletitle"><label>Guid</label></view>
						<view class="controlvalue">
							<input type="text" v-model="formexample.guid" name="guid" disabled="true" />
						</view>
					</view>
				</view>
				<view class="formlist inputtext margin-top-20">
					<view class="formgroup border-bottom-E3E3E5">
						<view class="labletitle"><label>单号编号</label></view>
						<view class="controlvalue">
							<input type="text" v-model="formexample.billNo" name="billNo" disabled="true" />
						</view>
					</view>
				</view>
				<view class="formlist inputtext" @tap="radioText">
					<view class="formgroup border-bottom-E3E3E5">
						<view class="labletitle"><label>单选文本</label></view>
						<view class="controlvalue">
							<input type="text" v-model="formexample.radioText" name="radioText" placeholder="选择" disabled="true" />
						</view>
						<view class="advanceicon iconfont icon-xiangyou"></view>
					</view>
				</view>
				<view class="formlist inputtext" @tap="dropdownText">
					<view class="formgroup border-bottom-E3E3E5">
						<view class="labletitle"><label>下拉文本</label></view>
						<view class="controlvalue">
							<input type="text" v-model="formexample.dropdownText" name="dropdownText" placeholder="选择" disabled="true" />
						</view>
						<view class="advanceicon iconfont icon-xiangyou"></view>
					</view>
				</view>
				<view class="formlist inputtext" @tap="multiText">
					<view class="formgroup border-bottom-E3E3E5">
						<view class="labletitle"><label>多选文本</label></view>
						<view class="controlvalue">
							<input type="text" v-model="formexample.multiText" name="multiText" placeholder="选择" disabled="true" />
						</view>
						<view class="advanceicon iconfont icon-xiangyou"></view>
					</view>
				</view>
				<view class="formlist inputtext" @tap="dateTime">
					<view class="formgroup border-bottom-E3E3E5">
						<view class="labletitle"><label>日期时间</label></view>
						<view class="controlvalue">
							<input type="text" v-model="formexample.sedateTime" name="sedateTime" placeholder="选择" disabled="true" />
						</view>
						<view class="advanceicon iconfont icon-xiangyou"></view>
					</view>
				</view>
				<view class="formlist inputtext" @tap="date">
					<view class="formgroup border-bottom-E3E3E5">
						<view class="labletitle"><label>日期</label></view>
						<view class="controlvalue">
							<input type="text" v-model="formexample.sedate" name="sedate" placeholder="选择" disabled="true" />
						</view>
						<view class="advanceicon iconfont icon-xiangyou"></view>
					</view>
				</view>
				<view class="formlist inputtext" @tap="time">
					<view class="formgroup border-bottom-E3E3E5">
						<view class="labletitle"><label>时间</label></view>
						<view class="controlvalue">
							<input type="text" v-model="formexample.setime" name="setime" placeholder="选择" disabled="true" />
						</view>
						<view class="advanceicon iconfont icon-xiangyou"></view>
					</view>
				</view>
				<view class="formlist inputtext ">
					<view class="formgroup">
						<view class="labletitle"><label>单行文本</label></view>
						<view class="controlvalue">
							<input type="text" v-model="formexample.sltext" name="input" placeholder="输入" />
						</view>
					</view>
				</view>
				<view class="ym-border-cell">
					<view class="ym-border-solid"></view>
				</view>
				<view class="formlist">
					<view class="formgroup  padding-17">
						<view class="labletitletar"><label>会议描述</label></view>
						<view class="controlvalue  uni-textarea">
							<textarea v-model="formexample.textarea" name="textarea" placeholder="输入" />
							</view>
					</view>
				</view>
				
				<JNPFUpload v-model="fileList" :fileSize='2' :limit='9'></JNPFUpload>
				<view class="formlist inputtext margin-top-20">
					<view class="formgroup">
						<view class="labletitle"><label>编辑器</label></view>
					</view>
				</view>
				  <editor-context ></editor-context>
				  </scroll-view>
				<view class="buttom-box">
					<view class="flow-button">
						<button class="btn-same btn-keep" form-type="reset">清空</button>
						<button class="btn-same btn-submit" form-type="submit">保存</button>
					</view>
				</view>
			</form>
		<w-picker :mode="mode" :pickerList="pickerList" ref="picker" :isSearchShow="isSearchShow"></w-picker>ow="isSearchShow"></w-picker>
	</view>
</template>

<script>
	import helper from '@/common/js/helper.js'
	import jnpf from '@/common/js/jnpf.js'
	import wPicker from '@/components/w-picker/w-picker.vue'
	
	import editorcontext from '@/components/editor-context/editor-context.vue' 
	export default {
		components: {
			editorcontext,
			wPicker,
		},
		data() {
			return {
				formexample:{
					currentAccount:jnpf.userInfo().userAccount,
					currentName:jnpf.userInfo().realName,
					// currentPosition:jnpf.positionIdByName(jnpf.userInfo().positionId),
					currentDepartment:jnpf.organizeData(jnpf.userInfo().organizeId).F_FullName,
					dateTime:helper.toDate(new Date(), "yyyy-MM-dd HH:mm"),
					date:helper.toDate(new Date(), 'yyyy-MM-dd'),
					time:helper.toDate(new Date(), 'HH:mm'),
					guid:helper.getUuid(),
					billNo:'',
					radioText:'',
					multiText:'',
					sedateTime:'',
					sedate:'',
					setime:'',
					FileJson:'',
					dropdownText:'',
				},
				height:0,
				mode:'',
				isSearchShow:false,
				pickerList:[],
				dropdownList: [{
						label: "男",
						value: "1"
					},
					{
						label: "女",
						value: "2"
					},{
						label: "其他",
						value: "3"
					},],
				radioList: [{
						label: "单选一",
						value: "1"
					},
					{
						label: "单选二",
						value: "2"
					},
					{
						label: "单选三",
						value: "3"
					},
					{
						label: "单选四",
						value: "4"
					},
					{
						label: "单选五",
						value: "5"
					},
					{
						label: "单选六",
						value: "6"
					},
					{
						label: "单选七",
						value: "7"
					}
				],
				multiList:[{
						label: "多选一",
						value: "1"
					},
					{
						label: "多选二",
						value: "2"
					},
					{
						label: "多选三",
						value: "3"
					},
					{
						label: "多选四",
						value: "4"
					},
					{
						label: "多选五",
						value: "5"
					},
					{
						label: "多选六",
						value: "6"
					},
					{
						label: "多选七",
						value: "7"
					}],
				fileList:[],
				
			}
		},
		onLoad() {
			helper.ajax({
				url: '/api/System/BillRule/BillNumber/OrderNumber',
				success: res => {
					this.formexample.billNo=res.data.data;
					
				}
			});
			helper.ajax({
				url: '/api/System/BillRule/BillNumber/WF_ApplyBanquetNo',
				success: res => {
					this.formexample.sltext=res.data.data;
					
				}
			});
		},
		methods: {
			dropdownText(e) {
				this.pickerList = this.dropdownList;
				this.mode="selector";
				this.$refs.picker.show();
				this.$eventHub.$off('popupmodality');
				this.$eventHub.$on('popupmodality', (data) => {
					this.formexample.dropdownText = data.result;
					this.$eventHub.$off('popupmodality');
				});					
			},
			radioText(e) {
				this.pickerList = this.radioList;
				this.mode="electionsingle";
				this.$refs.picker.show();
				this.$eventHub.$off('popupmodality');
				this.$eventHub.$on('popupmodality', (data) => {
					this.formexample.radioText = data.result;
					this.$eventHub.$off('popupmodality');
				});					
			},
			multiText(e) {
				this.pickerList = this.multiList;
				this.mode="multiselector";
				this.$refs.picker.show();
				this.$eventHub.$off('popupmodality');
				this.$eventHub.$on('popupmodality', (data) => {
					// console.log(data)
					this.formexample.multiText = data.result;
					this.$eventHub.$off('popupmodality');
				});					
			},
			
			dateTime(e) {
				this.mode="dateTime";
				this.$refs.picker.show();
				this.$eventHub.$off('popupmodality');
				this.$eventHub.$on('popupmodality', (data) => {
					this.formexample.sedateTime = data.result;
					this.$eventHub.$off('popupmodality');
				});
			},
			date(e) {
				this.mode="date";
				this.$refs.picker.show();
				this.$eventHub.$off('popupmodality');
				this.$eventHub.$on('popupmodality', (data) => {
					this.formexample.sedate = data.result;
					this.$eventHub.$off('popupmodality');
				});
			},
			time(e) {
				this.mode="time";
				this.$refs.picker.show();
				this.$eventHub.$off('popupmodality');
				this.$eventHub.$on('popupmodality', (data) => {
					this.formexample.setime = data.result;
					this.$eventHub.$off('popupmodality');
				});
			},
			// async upBasicData(e) {
			// 	let arrImg = [];
			// 	let files=[];
			// 	for (let i = 0, len = e.length; i < len; i++) {
			// 		if (e[i].fileState == "success") {
			// 			fileJson.push({
			// 				fileId: e[i].fileId,
			// 				fileName: e[i].fileName,
			// 				fileSize: e[i].fileSize,
			// 				fileState: e[i].fileState,
			// 				fileTime: e[i].fileTime,
			// 				fileType: e[i].fileType
			// 			});
			// 		}
			// 		if (e[i].path != "") {
			// 			await arrImg.push(e[i].path.split(','));
			// 		}
			// 	}
			// },
			formSubmit: function(e) {
				// console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				var formdata = e.detail.value
				uni.showModal({
					content: '表单数据内容：' + JSON.stringify(formdata),
					showCancel: false
				});
			},
			formReset: function(e) {
				// console.log('清空数据')
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight;
				}
			});
			let buttom = uni.createSelectorQuery().select(".buttom-box");
			buttom.boundingClientRect(data => {
				this.height = this.height - data.height;
			}).exec();
		},
		
	}
</script>

<style>
	page {
		background-color: #f0f2f6;
	}
</style>
